<template>
  <div class="main-content" id="main">
    <div @click="hidde()" class="flex ">
      <ul class="left-tab">
        <li>门店信息</li>
      </ul>
      <div class="right-form">
        <ul>
          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>门店编号</span>
            </div>
            <div class="form-content">
              <select name="id" v-model="storeNum" @change="changgeStore">
                <option :value="item" v-for="(item,key) in storeList" :key="item.id">
                  {{ item.storeCode }}
                </option>
              </select>
              <span class="store-name">{{ storeNum.storeName == undefined ? '门店名称' : storeNum.storeName }}</span>
            </div>
          </li>

          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>快递方式</span>
            </div>
            <ul class="flex radio-box">
              <li class="radio-item"
                  :class="radioStat3 == item.id ? 'radio-item-active' : ''"
                  v-for="(item, key) in kuaidilist"
                  :key="item.id"
                  @click="radioChangeStat3(item.id)"
              >
                {{ item.courierName }}
              </li>
            </ul>
          </li>
          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>地址类型</span>
            </div>
            <ul class="flex radio-box">
              <li class="radio-item"
                  :class="radioStat4 == item.id ? 'radio-item-active' : ''"
                  v-for="(item, index) in radioArr4"
                  :key="index"
                  @click="radioChangeStat4(item.id)"
              >
                {{ item.name }}
              </li>
            </ul>
          </li>

          <li class="flex flex-a-center form-item" v-if="radioStat4 == 3">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>常用地址</span>
            </div>
            <div class="form-content">
              <select name="id" v-model="Saddress" @change="changeAdd">
                <option :value="item2" v-for="(item2,key) in addrestList" :key="item2.id">
                  {{ item2.address }}
                </option>
              </select>
            </div>
          </li>

          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>收货地址</span>
            </div>
            <div class="form-content">
              <span class="store-name address" v-if="radioStat4 == 1"
              >{{ storeNum.storeAddress }}</span
              >
              <input
                  v-if="radioStat4 == 2|| radioStat4 == 3"
                  class="address-input"
                  type="text"
                  v-model="address"
                  placeholder="请输入收货地址"
                  v-else
              />
            </div>
          </li>
          <!--新加的-->
          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>收货人</span>
            </div>
            <div class="form-content">
              <input
                  v-model="name"
                  class="address-input"
                  type="text"
                  placeholder="请输入收货人"/>
            </div>
          </li>

          <li class="flex flex-a-center form-item">
            <div class="flex flex-a-center lable-left">
              <span class="red">*</span>
              <span>收货电话</span>
            </div>
            <div class="form-content">
              <input
                  v-model="phone"
                  class="address-input"
                  type="text"
                  placeholder="请输入收货电话"/>
            </div>
          </li>
          <!--新加的结束-->

        </ul>
        <button type="submit" class="sub" @click="gotolink()">立即选购</button>
      </div>
    </div>

    <!-- 菜单2 -->
    <div class="fixed-btn-box" :class="{ open: fixedOpen }" @click="fixedOpen = !fixedOpen">
      <span class="fixed-btn"></span>
      <ul class="nav-list">
        <li>
          <span @click="shoppingShow = !shoppingShow,updateCart()">购物车</span>
        </li>
        <li>
          <span @click="$router.push('my-order')">查看订单</span>
        </li>
      </ul>
    </div>

    <!-- 购物车 -->
    <shopping :shoppingShow="shoppingShow" ref="shopp"></shopping>
  </div>
</template>
<script>
import shopping from '../../components/GoodsShopping.vue'
import Qs from "qs";
import {getAction, postAction} from "../../api/manage";

export default {
  created() {
    this.haoStore()
    this.getStoreList()
    this.getPackage()
    this.getKuaidi()
    this.banner()
    // this.getYewuType()
  },
  data() {
    return {
      // 常用地址
      Saddress: {},
      addrestList: [],
      fixedOpen: false,
      autohor_token: localStorage.getItem("token"), //token
      url: {
        storelist: '/logic/interface/query_allstore_companyId',
        packageType: '/logic/interface/query_dataBytype',
        kuaidi: '/logic/interface/query_allCourier',
        // 门店地址列表
        address: '/cart/addressList'
      },
      name: '', //收货人名称
      phone: '', // 收货人电话
      storeList: [], // 获取到的门店列表
      storeNum: {}, // 选中的门店
      packageType: [], // 获取的包装方式
      // yewuType: [], // 获取的业务类型
      kuaidilist: [], // 获取的快递列表
      storeName: "门店名称",
      radioArr1: [
        {
          id: 1,
          name: "正常业务"
        }
      ],
      radioStat1: "1",
      radioArr2: [
        {
          id: 1,
          name: "扁箱"
        },
        {
          id: 2,
          name: "立体箱(费用较高)"
        }
      ],
      radioStat2: "扁箱",
      radioArr3: [
        {
          id: 1,
          name: "顺丰"
        },
        {
          id: 2,
          name: "EMS"
        },
        {
          id: 3,
          name: "顺丰特惠（慢）"
        }
      ],
      radioStat3: "1",
      radioArr4: [
        {
          id: 1,
          name: "门店地址"
        },
        {
          id: 3,
          name: "常用地址"
        },
        {
          id: 2,
          name: "其他地址"
        }
      ],
      radioStat4: "1",
      address: "",
      orderNum: "",
      shoppingShow: false
    };
  },
  components: {shopping},
  methods: {

    // 切换常用地址
    changeAdd() {
      // 将选中的地址交给vuex保存
      this.$store.state.sdaa2 = this.Saddress
      //获取常用地址中的值
      this.address = this.Saddress.address
      this.name = this.Saddress.person
      this.phone = this.Saddress.phone
    },

    // 获取门店地址
    addressFunc() {
      // alert('门店编号？？' + this.storeNum.storeCode)
      getAction(domain.publicUrl + this.url.address, {'storeCode': this.storeNum.storeCode}).then(res => {
        if (res.data.code == '0') {
          this.addrestList = res.data.data
        }
      })
    },

    updateCart() { // 刷新购物车列表数据
      this.$refs.shopp.getCartList()
    },
    getStoreList() { // 获取门店列表
      let params = {
        token: this.autohor_token
      }
      postAction(domain.publicUrl + this.url.storelist, Qs.stringify(params)).then(res => {
        if (res.data.code == '0') {
          this.storeList = res.data.data
          // 默认选中第一个
          if (this.$store.state.store2 != null) {
            this.storeNum = this.$store.state.store2
            if (this.$store.state.phone2 != '') {
              this.phone = this.$store.state.phone2
            }
            if (this.$store.state.name2 != '') {
              this.name = this.$store.state.name2
            }
            this.address = this.$store.state.address2
            this.radioStat4 = this.$store.state.radioStat42
            this.radioStat3 = this.$store.state.radioStat32
          } else {
            this.storeNum = this.storeList[0]
            this.$store.state.storeid2 = this.storeNum.id
            this.$store.state.stooreCode2 = this.storeNum.storeCode
            this.phone = this.storeNum.phone
            this.name = this.storeNum.aboutPerson
            this.$store.state.name2 = this.name
            this.$store.state.kuaidiID2 = this.radioStat3
            this.$store.state.addressType2 = this.radioStat4
            if (this.radioStat4 == 1) {
              this.$store.state.address2 = this.storeNum.storeAddress
            } else {
              this.$store.state.address2 = this.address
            }
          }
        }
      })
    },
    getPackage() { // 选择包装方
      let typeparam = {"type": 3}
      postAction(domain.publicUrl + this.url.packageType, Qs.stringify(typeparam)).then(res => {
        if (res.data.code == '0') {
          this.packageType = res.data.data
        }
      })
    },
    /*getYewuType() { // 选择业务类型
        let typeparam = {"type": 2}
        postAction(domain.publicUrl + this.url.packageType, Qs.stringify(typeparam)).then(res => {
            if (res.data.code == '0') {
                this.yewuType = res.data.data
            }
        })
    },*/
    getKuaidi() { // query kuaidi diaomao！
      let typeparam = {"type": 3}
      postAction(domain.publicUrl + this.url.kuaidi).then(res => {
        if (res.data.code == '0') {
          this.kuaidilist = res.data.data
        }
      })
    },
    radioChangeStat1(val) {
      this.radioStat1 = val;
    },
    radioChangeStat2(val) {
      this.radioStat2 = val;
    },
    radioChangeStat3(val) {
      this.radioStat3 = val;
    },
    radioChangeStat4(val) {
      this.radioStat4 = val;
      if (val == 3) {
        this.addressFunc()
      }
    },
    hidde() {
      this.shoppingShow = false;
    },
    // 页面跳转
    gotolink() {
      if (this.storeNum.id == null || this.$store.state.storeid2 == null) {
        this.$message.warning("请选择门店")
        return
      }
      // this.$store.state.storeid = this.storeNum.id
      this.$store.state.name2 = this.name
      this.$store.state.store2 = this.storeNum
      this.$store.state.phone2 = this.phone
      this.$store.state.stooreCode2 = this.storeNum.storeCode
      this.$store.state.kuaidiID2 = this.radioStat3
      this.$store.state.addressType2 = this.radioStat4
      this.$store.state.radioStat32 = this.radioStat3
      if (this.radioStat4 == 1) {
        this.$store.state.address2 = this.storeNum.storeAddress
        this.$store.state.radioStat42 = 1
      } else if (this.radioStat4 == 2) {
        this.$store.state.address2 = this.address
        this.$store.state.radioStat42 = 2
      } else if (this.radioStat4 == 3) {
        this.$store.state.address2 = this.address
        this.$store.state.radioStat42 = 3
      }
      this.$router.push({name: "goodsmaterials", params: {id: 10}});
    },

    /**
     * 确定哪个门店
     */
    haoStore() {
      // 回显选中的常用地址
      if (this.$store.state.sdaa2 != null) {
        this.Saddress = this.$store.state.sdaa2
      }

      // 回显选中门店
      if (this.$store.state.store2 != null) {
        this.storeNum = this.$store.state.store2
        this.addressFunc()
      }
    },

    /**
     * 切换门店
     */
    changgeStore() {
      this.$store.state.storeid2 = this.storeNum.id
      this.phone = this.storeNum.phone
      this.name = this.storeNum.aboutPerson
    },

    banner() {
      console.log('你好')
    }
  }
};
</script>
<style lang="scss">
.fixed-btn-box {
  position: fixed;
  left: 40px;
  bottom: 20px;
  display: flex;
  z-index: 10;

  .fixed-btn {
    cursor: pointer;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: url('~@/assets/img/group-order/u3869.svg') #555555 center center;
    z-index: 2;
  }

  .nav-list {
    z-index: 1;
    max-width: 0;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background-color: white;
    transition: all 0.2s linear;
    opacity: 0;

    li {
      font-size: 13px;
      margin: 0 15px;
      cursor: pointer;
      white-space: nowrap;

      &,
      a {
        color: #333;
        text-decoration: none;
      }
    }
  }

  &.open {
    .fixed-btn {
      background: url('~@/assets/img/group-order/u3871.svg') #555555 center center;
    }

    .nav-list {
      opacity: 1;
      max-width: 500px;
    }
  }
}

.main-content {
  margin: 30px 85px;
  padding: 55px 90px 200px 90px;
  font-size: 16px;
  background: #ffffff;

  .left-tab {
    height: 607px;

    border-right: solid 1px #e9e9e9;

    li {
      color: #303030;
      font-size: 16px;
      padding: 18px;
      border-right: solid 4px #303030;
    }
  }

  .right-form {
    padding: 0 44px;

    ul {
      .form-item {
        margin-bottom: 20px;

        .lable-left {
          width: 100px;
          margin-right: 20px;
          font-weight: bold;

          span {
            display: block;
          }

          .red {
            padding-top: 8px;
            color: #fe2f2f;
            margin-right: 5px;
          }
        }

        .form-content {
          width: 650px;

          > select {
            width: 310px;
            height: 41px;
            border-radius: 4px;
            color: #272727;
            padding: 0 15px;
            margin-right: 20px;
            border: 1px solid #d9d9d9;
          }

          .store-name {
            width: 310px;
            height: 41px;
            text-align: left;
            display: inline-block;
            color: #272727;
            font-weight: bold;
            background: #f3f3f3;
            box-sizing: border-box;
            border-radius: 4px;
            padding: 13px 18px;
          }

          .address {
            width: 450px;
          }

          .address-input {
            width: 450px;
            height: 41px;
            display: inline-block;
            color: #272727;
            font-weight: bold;
            background: #f3f3f3;
            box-sizing: border-box;
            border-radius: 4px;
            padding: 13px 18px;
          }

          .order-input {
            width: 450px;
            height: 41px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #d9d9d9;
            padding: 13px 18px;
            box-sizing: border-box;
          }
        }

        .radio-box {
          .radio-item {
            width: 130px;
            line-height: 41px;
            background: #ffffff;
            text-align: center;
            border-radius: 4px;
            margin-right: 12px;
            color: #828282;
            border: 1px solid #d9d9d9;
          }

          .radio-item-active {
            color: #f9d532;
            background: #636363;
            border: 1px solid #636363;
          }

          .radio-item:hover {
            color: #f9d532;
            background: #636363;
            border: 1px solid #636363;
          }
        }
      }
    }

    .sub {
      width: 120px;
      height: 41px;
      font-size: 16px;
      font-weight: bold;
      color: #474747;
      background: #f9d532;
      border-radius: 3px;
    }
  }
}
</style>
